//定义组件
var MySelect = React.createClass({
    //初始化状态数据
    getInitialState:function () {
      return{
          mySelect:'pink',
          //定义复选框的默认值
          mulSelect: ['html','js']
      }
    },
    //定义事件回调函数
    changeMySelect:function (e) {
      //获取值
      var val=  e.target.value;
      //更新状态
        this.setState({
            mySelect:val
        })
    },
    //定义复选下拉框回调函数
    mulSelectChange : function (e) {
        //直接获取value不准确
        // console.log(e.target.value);
        // console.log(e.target.options);
        var result = [];
        // 查看哪些select选中了
        for(var i=0;i<e.target.options.length;i++){
            // console.log(e.target.options[i].selected)
            //找到选中的option，保存value属性
            if(e.target.options[i].selected){
                //保存value属性
                result.push(e.target.options[i].value);
            }
        }
        //更新状态
        this.setState({
            mulSelect:result
        })
    },
    showResult:function () {
        //查看非约束性结果
        // console.log(this.refs.mySelect.value);
        //查看非约束性复选下拉框结果
        //循环this.refs.mySelect.options
        var options = this.refs.mySelect.options;
        //定义结果容器
        var result = [];
        for(var i=0;i<options.length;i++){
            options[i].selected && result.push(options[i].value)
        }
        console.log(result);
        //查看约束性结果
        console.log(this.state.mySelect)
        //查看约束性复选框的结果
        console.log(this.state.mulSelect)


    },
    //渲染组件
    render:function () {
        return(
            <div>
                {/*定义非约束性的*/}
                {/*<select ref="mySelect" defaultValue="green">*/}
                {/*定义非约束性的复选下拉框*/}
                <select ref="mySelect" defaultValue={["green"]} multiple>
                    <option value="red">red</option>
                    <option value="green">green</option>
                    <option value="blue">blue</option>
                </select>

                {/*定义约束性的*/}
                <select value={this.state.mySelect} onChange={this.changeMySelect} >
                    <option value="yellow">yellow</option>
                    <option value="pink">pink</option>
                    <option value="orange">orange</option>
                </select>
                {/*定义约束性复选下拉框*/}
                <select multiple value={this.state.mulSelect} onChange={this.mulSelectChange} >
                    <option value="html">html</option>
                    <option value="css">css</option>
                    <option value="js">js</option>
                </select>

                <button onClick={this.showResult}>查看结果</button>
            </div>
        )
    }
})
ReactDOM.render(<MySelect/>,app)